<template>
  <div>
    <!--块类统计-->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <h3>医院总数</h3>
          <div>
            <i class="el-icon-s-shop" style="color: purple"></i>
            <span>{{ this.allhospital }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>床位总数</h3>
          <div>
            <i class="el-icon-user-solid" style="color: green"></i>
            <span>{{ this.allbed }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>总股东</h3>
          <div>
            <i class="el-icon-s-flag" style="color: red"></i>
            <span>{{ this.allshareholder }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>年度营业额</h3>
          <div>
            <i class="el-icon-star-on" style="color: blue"></i>
            <span>{{ this.allactualpay }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--acharts统计图-->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <echarts1 />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <echarts2 />
        </el-card>
        <el-card class="box-card">
          <echarts3 />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import echarts1 from "@/ECharts/echarts1";
import echarts2 from "@/ECharts/echarts2";
import echarts3 from "@/ECharts/echarts3";
import {
  getAllactualpay,
  getallBed,
  getallHospital,
  getallshareholder,
} from "../api/show";
export default {
  name: "home",
  components: {
    echarts1,
    echarts2,
    echarts3,
  },
  data() {
    return {
      allactualpay: "",
      allbed: "",
      allhospital: "",
      allshareholder: "",
    };
  },
  methods: {
    getallactualpay() {
      getAllactualpay().then((res) => {
        if (res.data.code == 200) {
          this.allactualpay = res.data.data;
        }
      });
    },
    getAllBed() {
      getallBed().then((res) => {
        if (res.data.code == 200) {
          this.allbed = res.data.data;
        }
      });
    },
    getAllHospital() {
      getallHospital().then((res) => {
        if (res.data.code == 200) {
          this.allhospital = res.data.data;
        }
      });
    },
    getAllshareholder() {
      getallshareholder().then((res) => {
        if (res.data.code == 200) {
          this.allshareholder = res.data.data;
        }
      });
    },
  },
  mounted() {
    this.getallactualpay();
    this.getAllBed();
    this.getAllHospital();
    this.getAllshareholder();
  },
};
</script>
 
<style scoped>
.el-card {
  margin-bottom: 20px;
  text-align: center;
}
</style>